{% extends '../layout.html' %}
<!-- header-start -->
{% block head %}
{% parent %}
{% endblock %}
<!-- header-end -->

<!-- body-start -->
{% block content %}
    <div class="Hr_PersonalCenter">
        <div class="personal_center_new">
            <img src="/images/personal-center/header-bg.png" alt="" class="personal_center_bg">
            <div class="personal_center_user_img">
                <img src="{{ thatData.haier_user.u_image|default('/images/personal-center/wx_photot.jpg') }}" alt="" class="user_img">
                <img src="/images/personal-center/sub_flag.png" alt="" class="sub_flag">
            </div>
            <div class="personal_center_info">
                <span class="personal_center_info_name mr_10"> {{ User.userInfo.username|default('海尔用户') }} </span>|
                <span class="personal_center_members mr_10">{{ User.userInfo.memberInfo.memberRank|default('--') }}</span>|
                <label class="personal_center_shells">海贝<span style="margin:0 5px;">{{ User.userInfo.totalPoint|default('--') |raw}}</span></label>
            </div>
            <div class="personal_center_rank">
                <label class="personal_center_growth">会员购买金额<span style="margin:0 5px;">{{ User.userInfo.memberInfo.buyAmount|default(0) }}</span></label>
                {#<label class="personal_center_growth"><span style="margin:0 5px;">{{ thatData.haier_user.u_haibei|default('--') }}</span></label>#}
                <!--<label class="personal_center_rank_global">全球排名<span style="margin:0 5px;">&#45;&#45;</span></label>-->
            </div>
            <div class="personal_center_star">
                <img src="/images/personal-center/personal_center_star.png" alt="">
                <img src="/images/personal-center/personal_center_star-1.png" alt="" style="z-index: 11">
                {% set allExp=parseFloat(User.userInfo.memberInfo.exp) + parseFloat(User.userInfo.memberInfo.upgradeExp) %}
                <img src="/images/personal-center/percent.png" alt="" class="personal_center_star_progress" style="width:{{ parseFloat(User.userInfo.memberInfo.exp)/allExp*100 }}%">
                <img src="/images/personal-center/copper-star.png" alt="">
                <img src="/images/personal-center/Silver-Star.png" alt="">
                <img src="/images/personal-center/gold-star.png" alt="">
            </div>
            {#<div class="personal_center_footer">#}
                {#<label class="personal_center_growth">已注册{{ thatData.bindCount }}款产品,还差<span style="margin:0 2px;">{{ thatData.haier_user.memberInfo.upgradeAmount }}</span>购买金额升级<span>金卡会员,</span></label>#}
                {#<label class="personal_center_growth">已超过<span style="margin:0 2px;">94%</span>的会员</label>#}
            {#</div>#}
            {#<a href="http://tuser.haier.com/cnmobile/services_supports/myhaier/userinfo.shtml?fromApp=yes&appName=SCRM" class="personal_center_system">#}
                {#<img src="/images/personal-center/set_up.png" alt="" >#}
            {#</a>#}
            <a href="/account-manage" class="personal_center_system">
                <img src="/images/personal-center/set_up.png" alt="" >
            </a>
        </div>
        <div class="flex-box">
            <main>
                <section class="media-content">
                    <div class="media-title">
                        <h4>我的产品</h4>
                        <a class="more">更多</a>
                    </div>
                    <ul class="media-body pro-box p-b-10 hidden" style="height: 105px;">
                        <li class="pro-item m-r-5 {% if EquipmentsListIdList|EquipmentsList(5) %}active{% endif %}">
                            <a href="{% if EquipmentsListIdList|EquipmentsList(5) %}/my-product-05{% endif %}">
                                <span class="ico">
                                    <img src="/images/personal-center/bx.png"/>
                                </span>
                                <p>冰箱</p>
                            </a>
                        </li>
                        <li class="pro-item m-r-5 {% if EquipmentsListIdList|EquipmentsList(3) %}active{% endif %}">
                            <a href="{% if EquipmentsListIdList|EquipmentsList(3) %}/my-product-03{% endif %}">
                                <span class="ico">
                                    <img src="/images/personal-center/xyj.png"/>
                                </span>
                                <p>洗衣机</p>
                            </a>
                        </li>
                        <li class="pro-item m-r-5 {% if EquipmentsListIdList|EquipmentsList(7) %}active{% endif %}">
                            <a href="{% if EquipmentsListIdList|EquipmentsList(7) %}/my-product-07{% endif %}">
                                <span class="ico">
                                    <img src="/images/personal-center/ds.png"/>
                                </span>
                                <p>电视</p>
                            </a>
                        </li>
                        <li class="pro-item m-r-5 {% if EquipmentsListIdList|EquipmentsList(10) %}active{% endif %}">
                            <a href="{% if EquipmentsListIdList|EquipmentsList(10) %}/my-product-10{% endif %}">
                                <span class="ico">
                                    <img src="/images/personal-center/kt.png"/>
                                </span>
                                <p>空调</p>
                            </a>
                        </li>
                        <li class="pro-item m-r-5 {% if EquipmentsListIdList|EquipmentsList(1) %}active{% endif %}">
                            <a href="{% if EquipmentsListIdList|EquipmentsList(1) %}/my-product-1{% endif %}">
                                <span class="ico">
                                    <img src="/images/personal-center/cd.png"/>
                                </span>
                                <p>厨电</p>
                            </a>
                        </li>
                    </ul>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>基础权益</h4>
                        <a class="more">更多</a>
                    </div>
                    <ul class="media-body pro-box hidden p-b-10" style="height: 105px;">
                        <li class="pro-item active w-bar-25 hbdh">
                            <a href="/seashells">
                                <span class="ico">
                                    <img src="/images/personal-center/hbdh.png"/>
                                </span>
                                <p>海贝兑换</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 ybfw">
                            <a href="/vip-permission">
                                    <span class="ico">
                                        <img src="/images/personal-center/ybfw.png"/>
                                    </span>
                                <p>延保服务</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 mfqx">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/mfqx.png"/>
                                </span>
                                <p>免费清洗</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 mfsm">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/mfsm.png"/>
                                </span>
                                <p>免费上门</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 hygh">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/hygh.png"/>
                                </span>
                                <p>会员关怀</p>
                            </a>
                        </li>
                        {#<li class="pro-item active mfby">#}
                            {#<a href="/vip-permission">#}
                                {#<span class="ico">#}
                                    {#<img src="/images/personal-center/mfby.png"/>#}
                                {#</span>#}
                                {#<p>免费保养</p>#}
                            {#</a>#}
                        {#</li>#}
                    </ul>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>极致服务</h4>
                        <a class="more">更多</a>
                    </div>
                    <ul class="media-body pro-box p-b-10" style="height: 105px;">
                        <li class="pro-item active w-bar-25 jsjx">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/jsjx.png"/>
                                </span>
                                <p>极速进线</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 zskf">
                            <a href="/online-service">
                                <span class="ico">
                                    <img src="/images/personal-center/zskf.png"/>
                                </span>
                                <p>专属客服</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 xsjj">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/xsjj.png"/>
                                </span>
                                <p>限时解决</p>
                            </a>
                        </li>
                        <li class="pro-item active w-bar-25 jsdk">
                            <a>
                                <span class="ico">
                                    <img src="/images/personal-center/jsdk.png"/>
                                </span>
                                <p>极速换货</p>
                            </a>
                        </li>
                    </ul>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>生态权益</h4>
                        <a class="more">更多</a>
                    </div>
                    <ul class="media-body pro-box p-b-10">
                        <li class="pro-item active w-bar-25 xyjd">
                            <a href="http://testpm.haiercash.com/PaymentPlatform/servlet/data/userLoginVerify.do?uuid={{ access_token }}">
                                <span class="ico">
                                    <img src="/images/personal-center/xyjd.png"/>
                                </span>
                                <p>信用借贷</p>
                            </a>
                        </li>
                    </ul>
                </section>
                <section class="img-slide">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide one-slide"><a href="/task" style=""></a></div>
                            <div class="swiper-slide two-slide"><a href="/task" style=""></a> </div>
                            <div class="swiper-slide three-slide"><a href="/task"></a></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>我的服务</h4>
                        <a href="javascript:void(0);" style="display: none;"><p>更多</p></a>
                    </div>
                    <div class="media-body sever-box">
                        <a class="m-b-10" href="/my-order">
                            <div class="sever-item">
                                {% if ServiceList and ServiceList.list.length>0 %}
                                    <p>
                                        {{ ServiceList.list[0].assign_date }}
                                    </p>
                                    <p>
                                        {{  ServiceList.list[0].modal_name|default('') }}
                                    </p>
                                    <p>{{  ServiceList.list[0].wo_status_zy }}</p>
                                {% else %}
                                    暂无我的服务
                                {% endif %}
                            </div>
                        </a>
                    </div>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>我的订单</h4>
                        <a href="javascript:void(0);" style="display: none;"><p>更多</p></a>
                    </div>
                    <div class="media-body">
                        <a href="/service-schedule">
                            <div class="order-item">
                                <div class="order-number">
                                    <h5>订单号：<span>D1611171518543856</span></h5>
                                    <p class="unconfirm">未确认</p>
                                </div>
                                <div class="order-detail">
                                    <h5>收货信息：<span>青岛市北区长沙路18号</span></h5>
                                    <h5>下单时间：<span>2016-11-17 15:18</span></h5>
                                    <h5>支付金额：<span class="order-price">￥1499.00</span></h5>
                                </div>
                                {#<div class="order-check">#}
                                    {#<h5>查看详情</h5>#}
                                    {#<span class="chevron-right"></span>#}
                                {#</div>#}
                            </div>
                        </a>
                    </div>
                </section>
                <section class="media-content">
                    <div class="media-title">
                        <h4>异业权益</h4>
                        <a href="javascript:void(0);" style="display: none;"><p>更多</p></a>
                    </div>
                    <ul class="media-body active-box">
                        {#{% for key,advert in thatData.advert %}#}
                        {#<li class="active-item">#}
                            {#<a href="/ndustry_rights">#}
                                {#<img src="{{ advert.a_picture }}"/>#}
                            {#</a>#}
                        {#</li>#}
                        {#{% endfor %}#}
                        <li class="active-item">
                            <a>
                                <img src="/images/my-haier/advert/qy1.jpg"/>
                            </a>
                        </li>
                        <li class="active-item">
                            <a>
                                <img src="/images/my-haier/advert/qy2.jpg"/>
                            </a>
                        </li>
                        <li class="active-item">
                            <a>
                                <img src="/images/my-haier/advert/qy3.jpg"/>
                            </a>
                        </li>
                        <li class="active-item">
                            <a>
                                <img src="/images/my-haier/advert/qy4.jpg"/>
                            </a>
                        </li>
                    </ul>
                </section>
            </main>
        </div>
    </div>
{% endblock %}
<!-- body-end -->
<!-- script-start -->
{% block script %}
    <script type="text/javascript" src="/js/base/app.js"></script>
    <script type="text/javascript" src="/component/swiper/swiper.min.js"></script>
    <script type="text/javascript" src="/js/personal-center/personal-center.js"></script>
{% endblock %}
<!-- script-end -->